<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>11-vue中的数组的代理</title>
        <!-- 引入Vue -->
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <h1>{{uname}}</h1>
            <button @click="changeUname">修改姓名</button>
            <hr>

            <h1>{{news.title}}</h1>
            <h1>{{news.content}}</h1>
            <h1>{{news.a.b.c.d.e}}</h1>
            <button  @click="changeTitle">更新标题</button>
            <button @click="changeContent">更新内容</button>

            <hr>
            <h1>{{arr}}</h1>
            <button @click="changeArr">修改数组中的第一名字</button>

        </div>
    </body>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                uname:"困",
                arr:["早上困","中午困","晚上困"],
                news:{
                    title:"为什么这么困",
                    content:"好想睡觉呀",
                    a:{
                        b:{
                            c:{
                                d:{
                                    e:"困"
                                }
                            }
                        }
                    }
                },
            },
            methods:{
                changeUname(){
                    this.uname = "改了也困";
                },
                changeTitle(){
                    this.news.title = "？？？";
                },
                changeContent(){
                    this.news.content = "睡觉睡觉";
                },
                changeArr(){
                    this.arr.splice(0,1,"splice");
                },

            }
        })

        console.log(vm)





    </script>
</html>